<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- basic styles -->

    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="assets/css/font-awesome.min.css" />

    <!--[if IE 7]>
    <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
    <![endif]-->

    <!-- page specific plugin styles -->

    <!-- fonts -->



    <!-- ace styles -->

    <link rel="stylesheet" href="assets/css/ace.min.css" />
    <link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
    <link rel="stylesheet" href="assets/css/ace-skins.min.css" />

    <!--[if lte IE 8]>
    <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
    <![endif]-->

    <!-- inline styles related to this page -->

    <!-- ace settings handler -->

    <script src="assets/js/ace-extra.min.js"></script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!--[if lt IE 9]>
    <script src="assets/js/html5shiv.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="navbar navbar-default" id="navbar">
    <script type="text/javascript">
        try{ace.settings.check('navbar' , 'fixed')}catch(e){}
    </script>

    <div class="navbar-container" id="navbar-container">
        <div class="navbar-header pull-left">
            <a href="#" class="navbar-brand">
                <small>
                    <i class="icon-leaf"></i>
                    elongUI
                </small>
            </a><!-- /.brand -->
        </div>
        <!-- /.navbar-header -->


    </div>
    <!-- /.container -->
</div>

<div class="main-container" id="main-container">
<script type="text/javascript">
    try {
        ace.settings.check('main-container', 'fixed')
    } catch (e) {
    }
</script>

<div class="main-container-inner">
<a class="menu-toggler" id="menu-toggler" href="#">
    <span class="menu-text"></span>
</a>

<div class="sidebar" id="sidebar">
<script type="text/javascript">
    try {
        ace.settings.check('sidebar', 'fixed')
    } catch (e) {
    }
</script>


<!-- #sidebar-shortcuts -->

<ul class="nav nav-list">
<li class="">
    <a href="/">
        <i class="icon-dashboard"></i>
        <span class="menu-text"> 控制台 </span>
    </a>
</li>

<li>
    <a href="/dialog.html">
        <i class="icon-text-width"></i>
        <span class="menu-text"> 弹出框 </span>
    </a>
</li>

<li>
    <a href="#" class="dropdown-toggle">
        <i class="icon-desktop"></i>
        <span class="menu-text"> UI 组件 </span>

        <b class="arrow icon-angle-down"></b>
    </a>

    <ul class="submenu">
        <li>
            <a href="elements.html">
                <i class="icon-double-angle-right"></i>
                组件
            </a>
        </li>

        <li>
            <a href="buttons.html">
                <i class="icon-double-angle-right"></i>
                按钮 &amp; 图表
            </a>
        </li>

        <li>
            <a href="treeview.html">
                <i class="icon-double-angle-right"></i>
                树菜单
            </a>
        </li>

        <li>
            <a href="jquery-ui.html">
                <i class="icon-double-angle-right"></i>
                jQuery UI
            </a>
        </li>

        <li>
            <a href="nestable-list.html">
                <i class="icon-double-angle-right"></i>
                可拖拽列表
            </a>
        </li>

        <li>
            <a href="#" class="dropdown-toggle">
                <i class="icon-double-angle-right"></i>

                三级菜单
                <b class="arrow icon-angle-down"></b>
            </a>

            <ul class="submenu">
                <li>
                    <a href="#">
                        <i class="icon-leaf"></i>
                        第一级
                    </a>
                </li>

                <li>
                    <a href="#" class="dropdown-toggle">
                        <i class="icon-pencil"></i>

                        第四级
                        <b class="arrow icon-angle-down"></b>
                    </a>

                    <ul class="submenu">
                        <li>
                            <a href="#">
                                <i class="icon-plus"></i>
                                添加产品
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <i class="icon-eye-open"></i>
                                查看商品
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</li>

<li>
    <a href="/jqGrid.html" class="dropdown-toggle">
        <i class="icon-list"></i>
        <span class="menu-text"> 订单查询 </span>

    </a>
</li>

<li>
    <a href="#" class="dropdown-toggle">
        <i class="icon-edit"></i>
        <span class="menu-text"> 表单 </span>

        <b class="arrow icon-angle-down"></b>
    </a>

    <ul class="submenu">
        <li>
            <a href="form-elements.html">
                <i class="icon-double-angle-right"></i>
                表单组件
            </a>
        </li>

        <li>
            <a href="form-wizard.html">
                <i class="icon-double-angle-right"></i>
                向导提示 &amp; 验证
            </a>
        </li>

        <li>
            <a href="wysiwyg.html">
                <i class="icon-double-angle-right"></i>
                编辑器
            </a>
        </li>

        <li>
            <a href="dropzone.html">
                <i class="icon-double-angle-right"></i>
                文件上传
            </a>
        </li>
    </ul>
</li>

<li>
    <a href="widgets.html">
        <i class="icon-list-alt"></i>
        <span class="menu-text"> 插件 </span>
    </a>
</li>



<li>
    <a href="#" class="dropdown-toggle">
        <i class="icon-tag"></i>
        <span class="menu-text"> 更多页面 </span>

        <b class="arrow icon-angle-down"></b>
    </a>

    <ul class="submenu">
        <li>
            <a href="profile.html">
                <i class="icon-double-angle-right"></i>
                用户信息
            </a>
        </li>

        <li>
            <a href="inbox.html">
                <i class="icon-double-angle-right"></i>
                收件箱
            </a>
        </li>

        <li>
            <a href="pricing.html">
                <i class="icon-double-angle-right"></i>
                售价单
            </a>
        </li>

        <li>
            <a href="invoice.html">
                <i class="icon-double-angle-right"></i>
                购物车
            </a>
        </li>

        <li>
            <a href="timeline.html">
                <i class="icon-double-angle-right"></i>
                时间轴
            </a>
        </li>

        <li>
            <a href="login.html">
                <i class="icon-double-angle-right"></i>
                登录 &amp; 注册
            </a>
        </li>
    </ul>
</li>

<li class="active open">
    <a href="#" class="dropdown-toggle">
        <i class="icon-file-alt"></i>

								<span class="menu-text">
									其他页面
									<span class="badge badge-primary ">5</span>
								</span>

        <b class="arrow icon-angle-down"></b>
    </a>

    <ul class="submenu">
        <li>
            <a href="faq.html">
                <i class="icon-double-angle-right"></i>
                帮助
            </a>
        </li>

        <li>
            <a href="error-404.html">
                <i class="icon-double-angle-right"></i>
                404错误页面
            </a>
        </li>

        <li>
            <a href="error-500.html">
                <i class="icon-double-angle-right"></i>
                500错误页面
            </a>
        </li>

        <li>
            <a href="grid.html">
                <i class="icon-double-angle-right"></i>
                网格
            </a>
        </li>

        <li class="active">
            <a href="blank.html">
                <i class="icon-double-angle-right"></i>
                空白页面
            </a>
        </li>
    </ul>
</li>
</ul><!-- /.nav-list -->

<div class="sidebar-collapse" id="sidebar-collapse">
    <i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i>
</div>

<script type="text/javascript">
    try{ace.settings.check('sidebar' , 'collapsed')}catch(e){}
</script>
</div>

<div class="main-content">
    <div class="breadcrumbs" id="breadcrumbs">
        <script type="text/javascript">
            try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
        </script>

        <ul class="breadcrumb">
            <li>
                <i class="icon-home home-icon"></i>
                <a href="#">Home</a>
            </li>

            <li>
                <a href="#">Dialog</a>
            </li>
            <li class="active">Dialog Page</li>
        </ul><!-- .breadcrumb -->

        <div class="nav-search" id="nav-search">
            <form class="form-search">
                <span class="input-icon">
                    <input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
                    <i class="icon-search nav-search-icon"></i>
                </span>
            </form>
        </div><!-- #nav-search -->
    </div>

    <div class="page-content">
        <div class="row">
            <div class="col-xs-12">
                <!-- PAGE CONTENT BEGINS -->
                <div id="content">
                    <h2>弹出框示例</h2>
                    <hr size="2" />
                    <br />
                    <h3>3.外连接</h3>
                    <div class="item">
                        <input type="button" id="c" value="外连接窗口" onclick="open3()"/>
                        <br/>
<pre>
	<font color="#0000ff">var </font><font color="#800000">diag = </font><font color="#0000ff">new </font><font color="#800000">Dialog();</font>
	<font color="#800000">diag.Width = 900;</font>
	<font color="#800000">diag.Height = 400;</font>
	<font color="#800000">diag.Title = </font><font color="#ff00ff">&quot;外连接窗口&quot;</font><font color="#800000">;</font>
	<font color="#800000">diag.</font><font color="#008080">URL </font><font color="#800000">= </font><font color="#ff00ff">&quot;http://www.elong.com/&quot;</font><font color="#800000">;</font>
	<font color="#800000">diag.show();</font>
</pre>
                    </div>

                    <h3>4.内部html窗口</h3>
                    <div class="item">
                        <input type="button" id="d" value="内部html窗口" onclick="open4()"/>
                        <br/>
<pre>
	<font color="#0000ff">var </font><font color="#800000">diag = </font><font color="#0000ff">new </font><font color="#800000">Dialog();</font>
	<font color="#800000">diag.Width = 300;</font>
	<font color="#800000">diag.Height = 100;</font>
	<font color="#800000">diag.Title = </font><font color="#ff00ff">&quot;内部html窗口&quot;</font><font color="#800000">;</font>
	<font color="#800000">diag.InnerHtml=</font><font color="#ff00ff">'&lt;div style=&quot;text-align:center;color:red;font-size:14px;&quot;&gt;内部html窗口 &lt;b&gt;InnerHtml&lt;/b&gt; 内部html窗口&lt;/div&gt;'</font>
	<font color="#800000">diag.OKEvent = </font><font color="#0000ff">function</font><font color="#800000">(){diag.close();};</font><font color="#008000">//内部html窗口</font>
	<font color="#800000">diag.show();</font>
</pre>
                    </div>
                    <h3>8. 返回值到调用页面</h3>
                    <div class="item">
                        <input type="button" id="h" value="返回值到调用页面" onclick="open8()"/>
                        <input type="text" id="getval" value="窗口的值返回到这里"/>
                        <br/>
<pre>
	<font color="#0000ff">var </font><font color="#800000">diag = </font><font color="#0000ff">new </font><font color="#800000">Dialog();</font>
	<font color="#800000">diag.Title = </font><font color="#ff00ff">&quot;返回值到调用页面&quot;</font><font color="#800000">;</font>
	<font color="#800000">diag.</font><font color="#008080">URL </font><font color="#800000">= </font><font color="#ff00ff">&quot;test.html&quot;</font><font color="#800000">;</font>
	<font color="#800000">diag.OKEvent = </font><font color="#0000ff">function</font><font color="#800000">(){</font><font color="#0000ff">$id</font><font color="#800000">(</font><font color="#ff00ff">'getval'</font><font color="#800000">).</font><font color="#008080">value </font><font color="#800000">= diag.innerFrame.</font><font color="#008080">contentWindow</font><font color="#800000">.</font><font color="#ff0000">document</font><font color="#800000">.getElementById(</font><font color="#ff00ff">'a'</font><font color="#800000">).</font><font color="#008080">value</font><font color="#800000">;diag.close();};</font>
	<font color="#800000">diag.show();</font>
	<font color="#0000ff">var </font><font color="#800000">doc=diag.innerFrame.</font><font color="#008080">contentWindow</font><font color="#800000">.</font><font color="#ff0000">document</font><font color="#800000">;</font>
	<font color="#800000">doc.open();</font>
	<font color="#800000">doc.write(</font><font color="#ff00ff">'&lt;html&gt;&lt;body&gt;&lt;input id=&quot;a&quot; type=&quot;text&quot;/&gt;请在文本框里输入一些值&lt;/body&gt;&lt;/html&gt;'</font><font color="#800000">) ;</font>
	<font color="#800000">doc.close();</font>
</pre>
                    </div>
                    <h3>17. 弹出窗口自动关闭</h3>
                    <div class="item">
                        <input type="button" id="r" value="自动关闭" onclick="open17(1)"/>
                        <br/>
<pre>
	<font color="#0000ff">var </font><font color="#800000">diag = </font><font color="#0000ff">new </font><font color="#800000">Dialog();</font>
	<font color="#800000">diag.AutoClose=5;</font>
	<font color="#800000">diag.ShowCloseButton=</font><font color="#0000ff">false</font><font color="#800000">;</font>
	<font color="#800000">diag.</font><font color="#008080">URL </font><font color="#800000">= </font><font color="#ff00ff">&quot;javascript:void(document.write(\'这是弹出窗口中的内容\'))&quot;</font><font color="#800000">;</font>
	<font color="#800000">diag.show();</font>
</pre>
                        <span>注：AutoClose为自动关闭时间，单位秒</span> </div>

                </div>
                <!-- PAGE CONTENT ENDS -->
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.page-content -->
</div><!-- /.main-content -->

<div class="ace-settings-container" id="ace-settings-container">
    <div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
        <i class="icon-cog bigger-150"></i>
    </div>

    <div class="ace-settings-box" id="ace-settings-box">
        <div>
            <div class="pull-left">
                <select id="skin-colorpicker" class="hide">
                    <option data-skin="default" value="#438EB9">#438EB9</option>
                    <option data-skin="skin-1" value="#222A2D">#222A2D</option>
                    <option data-skin="skin-2" value="#C6487E">#C6487E</option>
                    <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
                </select>
            </div>
            <span>&nbsp; Choose Skin</span>
        </div>

        <div>
            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar" />
            <label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
        </div>

        <div>
            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar" />
            <label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
        </div>

        <div>
            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs" />
            <label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
        </div>

        <div>
            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" />
            <label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
        </div>

        <div>
            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container" />
            <label class="lbl" for="ace-settings-add-container">
                Inside
                <b>.container</b>
            </label>
        </div>
    </div>
</div><!-- /#ace-settings-container -->
</div><!-- /.main-container-inner -->

<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
    <i class="icon-double-angle-up icon-only bigger-110"></i>
</a>
</div><!-- /.main-container -->

<!-- basic scripts -->

<!--[if !IE]> -->

<script src="assets/js/jquery.min.js"></script>

<!-- <![endif]-->

<!--[if IE]>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<![endif]-->

<!--[if !IE]> -->

<script type="text/javascript">
    window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
</script>

<!-- <![endif]-->

<!--[if IE]>
<script type="text/javascript">
    window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->

<script type="text/javascript">
    if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/typeahead-bs2.min.js"></script>
<script type="text/javascript" src="assets/js/dialog/zDrag.js"></script>
<script type="text/javascript" src="assets/js/dialog/zDialog.js"></script>

<!-- page specific plugin scripts -->

<!-- ace scripts -->

<script src="assets/js/ace-elements.min.js"></script>
<script src="assets/js/ace.min.js"></script>

<!-- inline scripts related to this page -->
</body>

<script type="text/javascript">

    function open3()
    {
        var diag = new Dialog();
        diag.Width = 1200;
        diag.Height = 400;
        diag.Title = "内容页为外部连接的窗口";
        diag.URL = "www.elong.com";
        diag.OKEvent = function(){diag.close();};//点击确定后调用的方法
        diag.show();
    }
    function open4()
    {
        var diag = new Dialog();
        diag.Width = 300;
        diag.Height = 100;
        diag.Title = "内容页为html代码的窗口";
        diag.InnerHtml='<div style="text-align:center;color:red;font-size:14px;">直接输出html，使用 <b>InnerHtml</b> 属性。</div>'
        diag.OKEvent = function(){diag.close();};//点击确定后调用的方法
        diag.show();
    }

    function open8()
    {
        var diag = new Dialog();
        diag.Title = "返回值到调用页面";
        diag.URL = "test.html";
        diag.OKEvent = function(){$id('getval').value = diag.innerFrame.contentWindow.document.getElementById('a').value;diag.close();};
        diag.show();
        var doc=diag.innerFrame.contentWindow.document;
        doc.open();
        doc.write('<html><body><input id="a" type="text"/>请在文本框里输入一些值</body></html>') ;
        doc.close();
    }

    function open17(val)
    {
        var diag = new Dialog();
        diag.AutoClose=5;
        diag.ShowCloseButton=false;
        diag.URL = "javascript:void(document.write(\'这是弹出窗口中的内容\'))";
        diag.show();
    }
</script>
</html>
